<script setup>
import { onMounted, ref } from 'vue';
import serverService from "@/services/server.service";
import { AxiosError } from 'axios';
import { ElMessage, ElCard, ElTable, ElTableColumn, ElRow, ElCol, ElIcon, ElDescriptions, ElDescriptionsItem, ElScrollbar } from 'element-plus';
import { Box, CoffeeCup, Cpu, Platform, Ticket, Tickets } from '@element-plus/icons-vue';

const entity = ref({});
const showLoading = ref(false);

onMounted(async () => {
    load();
});

const load = async () => {
    try {
        showLoading.value = true;
        const res = await serverService.retrieve();
        entity.value = res;
    } catch (err) {
        if (err instanceof AxiosError) {
            const msg = err.response?.data?.message || err.message;
            ElMessage({ message: msg, type: "error" });
        }
        throw err;
    } finally {
        showLoading.value = false;
    }
}
</script>

<template>
    <ElScrollbar>
        <ElRow v-loading="showLoading">
            <ElCol :span="12" class="card-container">
                <ElCard>
                    <template #header>
                        <span>
                            <ElIcon>
                                <Cpu></Cpu>
                            </ElIcon>
                            CPU
                        </span>
                    </template>
                    <div class="el-table el-table--enable-row-hover el-table--medium">
                        <table cellspacing="0" class="w-full">
                            <thead>
                                <tr>
                                    <th class="el-table__cell is-leaf">
                                        <div class="cell">属性</div>
                                    </th>
                                    <th class="el-table__cell is-leaf">
                                        <div class="cell">值</div>
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="el-table__cell is-leaf">
                                        <div class="cell">核心数</div>
                                    </td>
                                    <td class="el-table__cell is-leaf">
                                        <div class="cell" v-if="entity.cpu">{{ entity.cpu.cpuNum }}</div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="el-table__cell is-leaf">
                                        <div class="cell">用户使用率</div>
                                    </td>
                                    <td class="el-table__cell is-leaf">
                                        <div class="cell" v-if="entity.cpu">{{ entity.cpu.used }}%</div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="el-table__cell is-leaf">
                                        <div class="cell">系统使用率</div>
                                    </td>
                                    <td class="el-table__cell is-leaf">
                                        <div class="cell" v-if="entity.cpu">{{ entity.cpu.sys }}%</div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="el-table__cell is-leaf">
                                        <div class="cell">当前空闲率</div>
                                    </td>
                                    <td class="el-table__cell is-leaf">
                                        <div class="cell" v-if="entity.cpu">{{ entity.cpu.free }}%</div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </ElCard>
            </ElCol>

            <ElCol :span="12" class="card-container">
                <ElCard>
                    <template #header>
                        <span>
                            <ElIcon>
                                <Tickets></Tickets>
                            </ElIcon>
                            内存
                        </span>
                    </template>
                    <div class="el-table el-table--enable-row-hover el-table--medium">
                        <table cellspacing="0" class="w-full">
                            <thead>
                                <tr>
                                    <th class="el-table__cell is-leaf">
                                        <div class="cell">属性</div>
                                    </th>
                                    <th class="el-table__cell is-leaf">
                                        <div class="cell">内存</div>
                                    </th>
                                    <th class="el-table__cell is-leaf">
                                        <div class="cell">JVM</div>
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="el-table__cell is-leaf">
                                        <div class="cell">总内存</div>
                                    </td>
                                    <td class="el-table__cell is-leaf">
                                        <div class="cell" v-if="entity.mem">
                                            {{ entity.mem.total }}G
                                        </div>
                                    </td>
                                    <td class="el-table__cell is-leaf">
                                        <div class="cell" v-if="entity.jvm">
                                            {{ entity.jvm.total }}M
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="el-table__cell is-leaf">
                                        <div class="cell">已用内存</div>
                                    </td>
                                    <td class="el-table__cell is-leaf">
                                        <div class="cell" v-if="entity.mem">
                                            {{ entity.mem.used }}G
                                        </div>
                                    </td>
                                    <td class="el-table__cell is-leaf">
                                        <div class="cell" v-if="entity.jvm">
                                            {{ entity.jvm.used }}M
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="el-table__cell is-leaf">
                                        <div class="cell">剩余内存</div>
                                    </td>
                                    <td class="el-table__cell is-leaf">
                                        <div class="cell" v-if="entity.mem">
                                            {{ entity.mem.free }}G
                                        </div>
                                    </td>
                                    <td class="el-table__cell is-leaf">
                                        <div class="cell" v-if="entity.jvm">
                                            {{ entity.jvm.free }}M
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="el-table__cell is-leaf">
                                        <div class="cell">使用率</div>
                                    </td>
                                    <td class="el-table__cell is-leaf">
                                        <div class="cell el-text" v-if="entity.mem"
                                            :class="{ 'el-text--danger': entity.mem.usage && entity.mem.usage > 80 }">
                                            {{ entity.mem.usage }}%
                                        </div>
                                    </td>
                                    <td class="el-table__cell is-leaf">
                                        <div class="cell el-text" v-if="entity.jvm"
                                            :class="{ 'el-text--danger': entity.jvm.usage && entity.jvm.usage > 80 }">
                                            {{ entity.jvm.usage }}%
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </ElCard>
            </ElCol>

            <ElCol :span="24" class="card-container">
                <ElCard>
                    <template #header>
                        <span>
                            <ElIcon>
                                <Platform></Platform>
                            </ElIcon>
                            服务器信息
                        </span>
                    </template>
                    <div class="el-table el-table--enable-row-hover el-table--medium">
                        <table cellspacing="0" class="w-full">
                            <tbody>
                                <tr>
                                    <td class="el-table__cell is-leaf">
                                        <div class="cell">服务器名称</div>
                                    </td>
                                    <td class="el-table__cell is-leaf">
                                        <div class="cell" v-if="entity.sys">{{ entity.sys.computerName }}</div>
                                    </td>
                                    <td class="el-table__cell is-leaf">
                                        <div class="cell">操作系统</div>
                                    </td>
                                    <td class="el-table__cell is-leaf">
                                        <div class="cell" v-if="entity.sys">{{ entity.sys.osName }}</div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="el-table__cell is-leaf">
                                        <div class="cell">服务器IP</div>
                                    </td>
                                    <td class="el-table__cell is-leaf">
                                        <div class="cell" v-if="entity.sys">{{ entity.sys.computerIp }}</div>
                                    </td>
                                    <td class="el-table__cell is-leaf">
                                        <div class="cell">系统架构</div>
                                    </td>
                                    <td class="el-table__cell is-leaf">
                                        <div class="cell" v-if="entity.sys">{{ entity.sys.osArch }}</div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </ElCard>
            </ElCol>

            <ElCol :span="24" class="card-container">
                <ElCard>
                    <template #header>
                        <span>
                            <ElIcon>
                                <CoffeeCup></CoffeeCup>
                            </ElIcon>
                            Java虚拟机信息
                        </span>
                    </template>
                    <div class="el-table el-table--enable-row-hover el-table--medium">
                        <table cellspacing="0" class="w-full table-fixed">
                            <tbody>
                                <tr>
                                    <td class="el-table__cell is-leaf">
                                        <div class="cell">Java名称</div>
                                    </td>
                                    <td class="el-table__cell is-leaf">
                                        <div class="cell" v-if="entity.jvm">{{ entity.jvm.name }}</div>
                                    </td>
                                    <td class="el-table__cell is-leaf">
                                        <div class="cell">Java版本</div>
                                    </td>
                                    <td class="el-table__cell is-leaf">
                                        <div class="cell" v-if="entity.jvm">{{ entity.jvm.version }}</div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="el-table__cell is-leaf">
                                        <div class="cell">启动时间</div>
                                    </td>
                                    <td class="el-table__cell is-leaf">
                                        <div class="cell" v-if="entity.jvm">{{ entity.jvm.startTime }}</div>
                                    </td>
                                    <td class="el-table__cell is-leaf">
                                        <div class="cell">运行时长</div>
                                    </td>
                                    <td class="el-table__cell is-leaf">
                                        <div class="cell" v-if="entity.jvm && entity.jvm.runTime">
                                            {{ entity.jvm.runTime[0] }}天{{ entity.jvm.runTime[1] }}小时
                                            {{ entity.jvm.runTime[2] }}分钟{{ entity.jvm.runTime[3] }}秒
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="1" class="el-table__cell is-leaf">
                                        <div class="cell">安装路径</div>
                                    </td>
                                    <td colspan="3" class="el-table__cell is-leaf">
                                        <div class="cell" v-if="entity.jvm">{{ entity.jvm.home }}</div>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="1" class="el-table__cell is-leaf">
                                        <div class="cell">项目路径</div>
                                    </td>
                                    <td colspan="3" class="el-table__cell is-leaf">
                                        <div class="cell" v-if="entity.sys">{{ entity.sys.userDir }}</div>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="1" class="el-table__cell is-leaf">
                                        <div class="cell">运行参数</div>
                                    </td>
                                    <td colspan="3" class="el-table__cell is-leaf">
                                        <div class="cell" v-if="entity.jvm">{{ entity.jvm.inputArgs }}</div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </ElCard>
            </ElCol>

            <ElCol :span="24" class="card-container">
                <ElCard>
                    <template #header>
                        <span>
                            <ElIcon>
                                <Box></Box>
                            </ElIcon>
                            磁盘状态
                        </span>
                    </template>
                    <div class="el-table el-table--enable-row-hover el-table--medium">
                        <table cellspacing="0" class="w-full">
                            <thead>
                                <tr>
                                    <th class="el-table__cell el-table__cell is-leaf">
                                        <div class="cell">盘符路径</div>
                                    </th>
                                    <th class="el-table__cell is-leaf">
                                        <div class="cell">文件系统</div>
                                    </th>
                                    <th class="el-table__cell is-leaf">
                                        <div class="cell">盘符类型</div>
                                    </th>
                                    <th class="el-table__cell is-leaf">
                                        <div class="cell">总大小</div>
                                    </th>
                                    <th class="el-table__cell is-leaf">
                                        <div class="cell">可用大小</div>
                                    </th>
                                    <th class="el-table__cell is-leaf">
                                        <div class="cell">已用大小</div>
                                    </th>
                                    <th class="el-table__cell is-leaf">
                                        <div class="cell">已用百分比</div>
                                    </th>
                                </tr>
                            </thead>
                            <tbody v-if="entity.sysFiles">
                                <tr v-for="(sysFile, index) in entity.sysFiles" :key="index">
                                    <td class="el-table__cell is-leaf">
                                        <div class="cell">{{ sysFile.dirName }}</div>
                                    </td>
                                    <td class="el-table__cell is-leaf">
                                        <div class="cell">{{ sysFile.sysTypeName }}</div>
                                    </td>
                                    <td class="el-table__cell is-leaf">
                                        <div class="cell">{{ sysFile.typeName }}</div>
                                    </td>
                                    <td class="el-table__cell is-leaf">
                                        <div class="cell">{{ sysFile.total }}</div>
                                    </td>
                                    <td class="el-table__cell is-leaf">
                                        <div class="cell">{{ sysFile.free }}</div>
                                    </td>
                                    <td class="el-table__cell is-leaf">
                                        <div class="cell">{{ sysFile.used }}</div>
                                    </td>
                                    <td class="el-table__cell is-leaf">
                                        <div class="cell" :class="{ 'text-danger': sysFile.usage > 80 }">
                                            {{ sysFile.usage }}%
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </ElCard>
            </ElCol>
        </ElRow>
    </ElScrollbar>
</template>

<style lang="scss" scoped>
.card-container {
    padding-right: 10px;
    padding-bottom: 10px;
}
</style>